.text-ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-break {
  white-space: normal;
  line-height: 1.5;
  word-break: break-all;
}
.text-nowrap {
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}
.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

$--border-base: 1px solid #dfe2ec;
.no-border {
  border: none !important;
}
.base-border {
  border: $--border-base;
  box-sizing: border-box;
  border-radius: 8px;
}
.base-border-t {
  border-top: $--border-base !important;
}

.base-border-r {
  border-right: $--border-base !important;
}

.base-border-b {
  border-bottom: $--border-base !important;
}

.base-border-l {
  border-left: $--border-base !important;
}

.none-border-t {
  border-top: none !important;
}

.none-border-r {
  border-right: none !important;
}

.none-border-b {
  border-bottom: none !important;
}

.none-border-l {
  border-left: none !important;
}

// .margin 0 ~ 60
@for $i from 0 through 60 {
  @if $i % 4==0 {
    .padding-#{$i} {
      padding: #{$i}px !important;
      box-sizing: border-box;
    }
    .pd-l-#{$i} {
      padding-left: #{$i}px !important;
      box-sizing: border-box;
    }
    .pd-t-#{$i} {
      padding-top: #{$i}px !important;
      box-sizing: border-box;
    }
    .pd-r-#{$i} {
      padding-right: #{$i}px !important;
      box-sizing: border-box;
    }
    .pd-b-#{$i} {
      padding-bottom: #{$i}px !important;
      box-sizing: border-box;
    }
    .margin-#{$i} {
      margin: #{$i}px !important;
    }
    .mg-l-#{$i} {
      margin-left: #{$i}px !important;
    }
    .mg-t-#{$i} {
      margin-top: #{$i}px !important;
    }
    .mg-r-#{$i} {
      margin-right: #{$i}px !important;
    }
    .mg-b-#{$i} {
      margin-bottom: #{$i}px !important;
    }
  }
}

// width heighT 30 ~ 600 以10递增 (优先级低)
@for $i from 30 through 800 {
  @if $i % 10==0 {
    .w-#{$i} {
      width: #{$i}px !important;
    }
    .h-#{$i} {
      height: #{$i}px !important;
    }
    .h-low-#{$i} {
      height: #{$i}px;
    }
    .min-w-#{$i} {
      min-width: #{$i}px;
    }
    .max-w-#{$i} {
      min-width: #{$i}px;
    }
    .max-h-#{$i} {
      max-height: #{$i}px;
    }
    .min-h-#{$i} {
      min-height: #{$i}px;
    }
  }
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.abs.full {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.full-img {
  max-height: 100%;
  max-width: 100%;
}

.full {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.full-h {
  height: 100%;
}

.full-w {
  width: 100% !important;
}

.no-scroll {
  overflow: hidden !important;
}

.scroll-x {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.scroll-y {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.scroll-x-y {
  overflow: auto;
}

.cp {
  cursor: pointer !important;
}

.cm {
  cursor: move !important;
}

.cna {
  cursor: not-allowed !important;
}

.fw-b {
  font-weight: bold !important;
}

.fw-n {
  font-weight: normal !important;
}

@for $i from 10 through 48 {
  .fs-#{$i} {
    font-size: #{$i}px !important;
  }
}

.fl-l {
  float: left !important;
}

.fl-r {
  float: right !important;
}

.dp-node {
  display: node;
}
.dp-b {
  display: block;
}
.dp-i-b {
  display: inline-block;
}
.transition {
  transition: all 0.3s;
}

.dl-flex {
  display: flex;
}

.al-center {
  align-items: center;
}

.jc-space-between {
  justify-content: space-between;
}
.jc-center {
  justify-content: center;
}
.jc-space-around {
  justify-content: space-around;
}
.jc-flex-end {
  justify-content: flex-end;
}
.jc-flex-start {
  justify-content: flex-start;
}
